<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
import type { Dayjs } from "dayjs";
type RangeValue = [Dayjs, Dayjs];

const value5 = ref<string>("Option1");
const value1 = ref<RangeValue>();
const value6 = ref<string>("");
const dataSource = [
  {
    key: "1",
    no: 2,
    type: "api",
    method: "200",
    time: "2020-04-05",
    status: "xxx",
  },
];
const columns = [
  {
    title: "充值编号",
    dataIndex: "no",
    key: "no",
  },

  {
    title: "充值类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "充值方式",
    dataIndex: "method",
    key: "method",
  },
  {
    title: "充值状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "充值时间",
    dataIndex: "time",
    key: "time",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
];
</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="充值记录" :back="true">
      <div class="flex flex-wrap ">
        <div class="flex w-100 whitespace-nowrap mb-5">
          <a-input-group compact>
            <a-select v-model:value="value5">
              <a-select-option value="Option1">流水编号</a-select-option>
            </a-select>
            <a-input v-model:value="value6" style="width: 70%" />
          </a-input-group>
        </div>
        <span class="w-5 hidden md:block"></span>
        <a-range-picker v-model:value="value1" class="mb-5" />
        <a-button type="text">
          <img src="/console/downloadIcon.png" alt="" class="w-5 h-5" />
        </a-button>
      </div>
      <div class="mt-5"></div>

      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns" />
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
